<template>
  <el-form
    :model="storeForm"
    :rules="basicRules"
    ref="storeForm"
    size="small"
    label-width="120px"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="租户:" prop="userNoOem">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.userNoOem"
            placeholder="请选择租户"
            filterable
            clearable
            :disabled="disabled"
            @change="userOemChange"
          >
            <el-option
              v-for="item in oemNoList"
              :key="item.userNo"
              :label="item.userName"
              :value="item.userNo"
            >
              <span style="float: left">{{ item.userName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userNo }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="24">
        <el-form-item label="服务商:" prop="userNoServe">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.userNoServe"
            placeholder="请选择服务商"
            filterable
            clearable
            :disabled="disabled"
            :loading="serviceLoading"
          >
            <el-option
              v-for="item in serviceNoList"
              :key="item.userNo"
              :label="item.serviceName"
              :value="item.userNo"
            >
              <span style="float: left">{{ item.serviceName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.serviceNo }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="24">
        <el-form-item label="设备归属:" prop="belongTo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.belongTo"
            placeholder="设备归属默认为瑞生意"
            filterable
          >
            <el-option
              v-for="item in belongToList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            >
             <span style="float: left">{{ item.dictValue }}</span>
             <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictKey }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="通道名称:" prop="aisleCode">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.aisleCode"
            placeholder="通道默认为瑞生意"
            filterable
            @clear="aisleClear"
          >
            <el-option
              v-for="item in aisleCodeList"
              :key="item.aisleCode"
              :label="item.aisleName"
              :value="item.aisleCode"
            >
              <span style="float: left">{{ item.aisleName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.aisleCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="8">
        <el-form-item label="设备类型:" prop="rptNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.rptNo"
            placeholder="请选择设备类型"
            filterable
          >
            <el-option
              v-for="item in rptNoList"
              :key="item.rptNo"
              :label="item.rptName"
              :value="item.rptNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="设备品牌:" prop="rpsNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.rpsNo"
            placeholder="请选择设备品牌"
            filterable
          >
            <el-option
              v-for="item in rpsNoList"
              :key="item.rpsNo"
              :label="item.rpsName"
              :value="item.rpsNo"
            >
             <span style="float: left">{{ item.rpsName }}</span>
             <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpsNo }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="设备型号:" prop="rpmNo">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.rpmNo"
            placeholder="请选择设备型号"
            filterable
          >
            <el-option
              v-for="item in rpmNoList"
              :key="item.rpmNo"
              :label="item.rpmName"
              :value="item.rpmNo"
            >
             <span style="float: left">{{ item.rpmName }}</span>
             <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpmNo }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="设备编号:" prop="rsSn">
          <el-input
            size="small"
            v-model="storeForm.rsSn"
            placeholder="请输入设备编号"
            onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
          ></el-input>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="24">
        <div class="stock-input">
          <el-form-item label="设备编号:" prop="startSn">
            <el-input
              size="small"
              v-model="storeForm.startSn"
              placeholder="请输入起始设备编号"
              onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            ></el-input>
          </el-form-item>
        </div>
        <div class="stock-input-interval">至</div>
        <div class="stock-input">
          <el-form-item label="" label-width="0" prop="endSn">
            <el-input
              size="small"
              v-model="storeForm.endSn"
              placeholder="请输入末尾设备编号"
              onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
            ></el-input>
          </el-form-item>
        </div>
      </el-col> -->
      <el-col :span="24">
        <el-form-item label="二维码编号" prop="qrCode">
          <el-input
            size="small"
            type="text"
            v-model="storeForm.qrCode"
            placeholder="请输入二维码编号"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="活动类型:" prop="activeType">
          <el-select
            class="haruyuki-width-100"
            size="small"
            v-model="storeForm.activeType"
            placeholder="通道默认为瑞生意"
            filterable
          >
            <el-option
              v-for="item in activeTypeList"
              :key="item.activeCode"
              :label="item.activeName"
              :value="item.activeCode"
            >
             <span style="float: left">{{ item.activeName }}</span>
             <span style="float: right; color: #8492a6; font-size: 13px">{{ item.activeCode }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="音响密钥" prop="yxToken">
          <el-input
            size="small"
            type="text"
            v-model="storeForm.yxToken"
            placeholder="请输入音响密钥"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="物联网卡编号" prop="cardCode">
          <el-input
            size="small"
            type="text"
            v-model="storeForm.cardCode"
            placeholder="请输入物联网卡编号"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {
  getSelectAisleList,
  // selectTypeList,
  selectSupList,
  selectModelList,
  getUserList
} from "@/api/rb-core/store/store";
// import {
//   getList as getServiceList
// } from "@/api/rb-core/serviceinfo/service_info";
import { getList as getActiveList } from "@/api/rb-core/active/active";
import { getDictionary } from "@/api/system/dict";

// import { uploadPublic } from "@/api/system/oss";

export default {
  props: {
    storeForm: Object,
    disabled: {
      type: Boolean,
      default: false,
    },
    isShowStatus: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      basicRules: {
        userNoOem: [
          { required: true, message: "请选择租户", trigger: "blur" },
        ],
        // userNoServe: [
        //   { required: true, message: "请选择服务商", trigger: "blur" },
        // ],
        // belongTo: [
        //   { required: true, message: "请选择设备归属", trigger: "blur" },
        // ],
        // aisleCode: [{ required: true, message: "请选择通道", trigger: "blur" }],
        rptNo: [
          { required: true, message: "请选择设备类型", trigger: "blur" },
        ],
        rpsNo: [
          { required: true, message: "请选择设备品牌", trigger: "blur" },
        ],
        rpmNo: [
          { required: true, message: "请选择设备型号", trigger: "blur" },
        ],
        rsSn: [
          // { required: true, message: "请输入起始设备编号", trigger: "blur" },
          { required: true, message: "请输入设备编号", trigger: "blur" },
        ],
        // endSn: [
        //   { required: true, message: "请输入截止设备编号", trigger: "blur" },
        // ],
        // activeType: [
        //   { required: true, message: "请输入活动类型", trigger: "blur" },
        // ],
        cardCode: [
          { required: true, message: "请输入物联网卡编号", trigger: "blur" },
        ],
        yxToken: [
          { required: true, message: "请输入音响密钥", trigger: "blur" },
        ],
        qrCode: [
          { required: true, message: "请输入二维码编号", trigger: "blur" },
        ],
      },
      oemNoList: [],
      serviceNoList: [],
      belongToList: [],
      // rptNoList: [],
      rpsNoList: [],
      rpmNoList: [],
      activeTypeList: [],
      isShow: true,
      // serviceLoading: false,
    };
  },
  computed: {
    rptsValue() {
      // rptNo——设备类型 rpsNo——设备品牌(供应商)
      const { rptNo, rpsNo } = this.storeForm;
      return {
        rptNo,
        rpsNo
      }
    }
  },
  watch: {
    'storeForm.aisleCode'(val) {
      if (val) {
        this.storeForm.activeType = '';
        this.getActiveTypeList(val, this.storeForm.rptNo)
      }
    },
    'storeForm.rptNo'(val) {
      if (val) {
        this.storeForm.rpsNo = '';
        this.storeForm.rpmNo = '';
        this.getSupList(val)
      }
    },
    rptsValue(data) {
      if (data) {
        if (data.rptNo && data.rpsNo) {
          this.storeForm.rpmNo = '';
          this.getModelList(data.rptNo, data.rpsNo)
        }
      }
    },

  },
  created() {
    this.doGetDicts();
    this.getActiveTypeList('', this.storeForm.rptNo)
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getUserList(-1, -1).then((res) => {
        this.oemNoList = res.data.records;
      });
      
      getSelectAisleList(-1, -1).then((res) => {
        this.aisleCodeList = res.data.data;
      });
      // selectTypeList(-1, -1).then((res) => {
      //   this.rptNoList = res.data.data;
      // });
      this.getSupList(this.storeForm.rptNo);
      getDictionary({ code: "belong_to" }).then((res) => {
        this.belongToList = res.data.data;
      });
    },
    /* 通过设备类型 获取设备品牌数据 */
    getSupList(rptNo) {
      selectSupList(-1, -1, {rptNo}).then((res) => {
        this.rpsNoList = res.data.data;
      });
    },
    /* 通过设备类型及设备品牌 获取设备型号数据 */
    getModelList(rptNo, rpsNo) {
      selectModelList(-1, -1, {rptNo, rpsNo}).then((res) => {
        this.rpmNoList = res.data.data;
      });
    },
    /* 通过通道编号及设备类型 获取活动类型 */
    getActiveTypeList(aisleCode, rptNo) {
      getActiveList(-1, -1, {aisleCode, rptNo}).then((res) => {
        this.activeTypeList = res.data.data.records;
      });
    },
    /* oem change */
    userOemChange(e) {
      console.log(e);
      // this.serviceLoading = true;
      // let userItem = this.oemNoList.find((item) => item.adminUserNo === e);
      // getServiceList(-1, -1, {serviceAuditStatus: 2, tenantId: userItem.tenantId}).then((res) => {
      //   this.serviceNoList = res.data.data.records;
      //   this.serviceLoading = false;
      // });
    },
    /* 清空通道 回调 */
    aisleClear() {
      this.getActiveTypeList('',this.storeForm.rptNo);
    }
  },
};
</script>

<style lang="scss" scoped>
.stock-flex {
  display: flex;
  align-items: center;
  // justify-content: center;
  justify-content: space-between;
}

.stock-input {
  width: calc(100% / 2 - 25px);
  display: inline-block;
}
.stock-input-interval {
  width: 50px;
  text-align: center;
  display: inline-block;
}
</style>